<template>
    <div class="menu-item" :class="{ 'menu-item-active':active }">
        <slot/>
    </div>
</template>
<script setup>
defineProps({
    active:{
        type:Boolean,
        default:false
    }
})
</script>
<style>
.menu-item {
  border-radius: 0.25rem;
  cursor: pointer;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.menu-item-active {
  --tw-bg-opacity: 1 !important;
  background-color: rgba(219, 234, 254, var(--tw-bg-opacity)) !important;
  --tw-text-opacity: 1 !important;
  color: rgba(37, 99, 235, var(--tw-text-opacity)) !important;
}

.menu-item:active {
  --tw-bg-opacity: 1 !important;
  background-color: rgba(219, 234, 254, var(--tw-bg-opacity)) !important;
}

.menu-item:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(239, 246, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(29, 78, 216, var(--tw-text-opacity));
}
</style>